<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <style>
        .error {
            color: red;

        }

        .a {
            background-color: blue;

        }

        .myblue {
            color: #6cf;
        }

        .bgCol {
            background-color: yellow;

        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 双大括号叫js表达式，不仅可以取值还可以js操作 -->
        <p>{{'张三说'+msg}}</p>
        <!-- 插值语法渲染字符串，无法解析html -->
        {{htmlStr}}
        <!-- 在vu中，使用v-开头的属性叫指令，v-html表示将字符串渲染为html，解析标签，内容一定要安全的 -->
        <!-- 防止XSS攻击，防止脚本攻击,解析标签类似react里面的dangerouslySetInnerHTML -->
        <p v-html="htmlStr"></p>
        <!-- v-text可以插入纯文本，不会解析标签 -->
        <p v-text="htmlStr"></p>
        <!-- 写一个随机数1-6范围内的数 -->
        <p>{{Math.floor(Math.random()*6)+1}}</p>
        <!-- 属性无法使用双大括号语法 -->
        <!--<p title="{{title}}">具有标题的p标签</p>  -->
        <!-- v-bind可以插入任意属性 -->

        <!-- 两个class情况下，会合并属性，而不是互相覆盖 -->
        <p class="bgCol" v-bind:title="title" :class="className">具有标题的p标签</p>
        <!-- 这样既可以error又有a样式 -->
        <p :class="className + ' a'">1111</p>

        <!-- v-on是用来监听事件用的 -->
        <button v-on:click="changeColor">点击切换颜色</button>

        <!-- @click是简写，等价于v-on:click -->
        <button @click="count++">点击增加{{count}}</button>

        <hr>
        <button @click="flag=!flag">点击切换flag</button>
        <!-- <p>{{flag?"为真":"为假"}}</p> -->

        <!-- v-if使用，不要出现多余标签 -->
        <p v-if="flag">flag为真</p>
        <p v-else-if="!flag">flag为假</p>
        <p v-else>一般看不到</p>

        <div v-for="item in mylist">{{item}}</div>

        <button @click="mylist.push(666)">添加一个666</button>
    </div>

</body>
<script>
    Vue.createApp({
        // 响应式数据
        data() {
            return {
                msg: "你小子",
                htmlStr: '<h1 style="color:blue">盐都不演了</h1>',
                title: "大标题",
                className: "error",
                count: 100,
                flag: true,
                mylist: [1, 2, 3, 4, 5]
            }
        },
        methods: {
            changeColor() {
                console.log(this);
                // 修改响应式数据
                this.className = this.className === "error" ? "myblue" : "error";

            }
        }
    }).mount('#app')
</script>

</html>